<template>
  <div>
    <div style="text-align: left;margin-bottom: 20px">
      <el-form label-position="left">
        <el-form-item label="课程">
          <el-select @change="toDo"  v-model="selectCourseId" filterable placeholder="请选择">
            <el-option
              v-for="item in courseData"
              :key="item.courseId"
              :label="item.title"
              :value="item.courseId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="studentList"
        stripe
        style="width: 100%">
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
          <span>
            {{scope.$index + 1 +  (page - 1) * pageSize}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="office"
          label="职业">
        </el-table-column>
        <el-table-column
          prop="progress"
          label="进度">
          <template slot-scope="scope">
            <span v-if="scope.row.progress!=null">
                {{scope.row.progress}}%
            </span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rate"
          label="评分">
          <template slot-scope="scope">
            <span v-if="scope.row.rate!=null" style="cursor: pointer">
              <el-tooltip class="item" effect="dark" :content="scope.row.evContent" placement="top-start">
                <span>{{scope.row.rate}}</span>
              </el-tooltip>
            </span>
            <span v-else>
              未评价
            </span>
          </template>
        </el-table-column>
        <!--<el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>-->

      </el-table>
    </div>
    <div>
      <div class="pagination" style="text-align: center">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'StudentAna',
  data () {
    return {
      total: 0,
      page: 1,
      pageSize: 10,
      selectCourseId: '',
      courseData: [],
      studentList: [],
      showMenu: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getPageCourse()
  },
  methods: {
    // 获取课程
    getPageCourse () {
      var _this = this
      var userId = this.$store.state.user.userId
      this.$axios.post('/api/course/getCourseToShow',
        this.$qs.stringify({
          userId: userId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseData = data.result
            _this.selectCourseId = data.result[0].courseId
            _this.getSizeAna()
            _this.getListStudent(1, _this.pageSize)
          }
        })
    },
    // 下方分页点击
    handleCurrentChange (page) {
      this.page = page
      this.getListStudent(page, this.pageSize)
    },
    getSizeAna () {
      var _this = this
      var queryData = {
        courseId: this.selectCourseId
      }
      this.$axios.post('/api/user/getSizeAnaUser',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = parseInt(result.result)
          }
        })
    },
    getListStudent (page, pageSize) {
      var _this = this
      var queryData = {
        page: page,
        pageSize: pageSize,
        courseId: this.selectCourseId
      }
      this.$axios.post('/api/user/getAnaUser',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.studentList = result.result
            var len = _this.studentList.length
            _this.showMenu.splice(0)
            for (let i = 0; i < len; i++) {
              _this.showMenu.push(false)
            }
          }
        })
    },
    toDo () {
      this.getSizeAna()
      this.getListStudent(1, this.pageSize)
    }
  }
}
</script>

<style scoped>

</style>
